<template>
  <div>
  <el-dialog
    :title="title"
    :visible.sync="open"
    append-to-body
    :modal="false"
    top="74px"
    class="container-dailog transition-box"
    :class="$store.state.app.sidebar.opened ? 'openSidebar' : 'hideSidebar'"
    @close="close"
  >
    <div>
      <div>
        <el-tabs v-model="tabActiveName">
          <el-tab-pane label="设备概况" name="detail">
            <div class="margin-bottom-10">
              <label class="font-16">设备信息</label>
            </div>
            <div class="border padding-tb-10 padding-lr-20 bg-gray">
              <div class="margin-top-10 width-all flex">
                <div
                  class="newdevInfoBoxLeftPic border flex margin-right-20 relative"
                >
                  <!-- <img
                    src="https://mp.usr.cn/6.3.0/static/img/ucloudDefaultDevicePic.20f6f02.png"
                    class="deviceImg block"
                  /> -->
                  <img
                    :src=baseUrl+form.deviceImg
                    class="deviceImg block"
                  />
                </div>
                <div class="devInfoBoxList" style="width: 200px">
                  <p class="margin-bottom-10">
                    <label class="status-label">{{ form.deviceName }}</label>
                  </p>
                  <p class="margin-bottom-10 padding-bottom-10 border-bottom">
                    <span class="greenFont"> {{ form.deviceNum }} </span>
                  </p>
                  <p class="margin-bottom-10">
                    <label class="status-label">所属组织：</label>
                    <span>{{ form.deptName }}</span>
                  </p>
                  <p class="margin-bottom-10">
                    <label class="status-label">设备模板：</label>
                    <span>{{ form.templatesName }}</span>
                  </p>
                  <p class="margin-bottom-10">
                    <label class="status-label">网关：</label>
                    <span>{{ form.gatewayName }}</span>
                  </p>
                  <p class="margin-bottom-10">
                    <label class="status-label">设备地址：</label>
                    <span>{{ form.addr || '--' }}</span>
                  </p>
                  <p class="margin-bottom-10">
                    <label class="status-label">从机地址：</label>
                    <span>{{ form.slaveAddress || '--' }}</span>
                  </p>
                  <p class="margin-bottom-10">
                    <label class="status-label">设备描述：</label>
                    <span>{{ form.deviceDesc || '--' }}</span>
                  </p>
                </div>
                <div class="flex-1 border-left margin-left-140 padding-left-20">
                  <baidu-map
                    class="map-container"
                    :zoom="15"
                    :center="location"
                    inertial-dragging
                    :scroll-wheel-zoom="true"
                  >
                  </baidu-map>
                </div>
              </div>
            </div>
            <div class="padding-tb-10">
              <div class="margin-bottom-10">
                <label class="font-16">变量概况</label>
              </div>
              <div>
                <el-row class="margin-bottom-10" :gutter="10">
                  <el-col :span="1.5">
                    <el-select v-model="varListQueryParams.variableTypeId" placeholder="请选择变量类型">
                      <el-option
                        v-for="dict in [...[{label: '全部变量', value: ''}], ...dict.type.variable_type]"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="1.5">
                    <el-input
                      placeholder="请输入变量名称"
                      clearable
                      v-model="varListQueryParams.variableName"
                    />
                  </el-col>
                  <el-col :span="1.5">
                    <el-button
                      type="primary"
                      size="small"
                      @click="varListQueryHandle"
                      >查询</el-button
                    >
                  </el-col>
                </el-row>
                <el-table height="300px" :data="valList" ref="var-table">
                  <el-table-column label="变量ID" prop="id" />
                  <el-table-column label="变量类型" prop="variableTypeName" align="center" />
                  <el-table-column label="变量名称" prop="variableName" align="center" />
                  <el-table-column label="更新时间" prop="createTime" align="center">
                    <template slot-scope="{row}">
                      {{ parseTime(row.createTime) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="当前值" prop="variableValue" align="center">
                    <template slot-scope="{row}">
                    <el-switch v-if="row.showDataValue == 1" @change="variableValueChangeHandle($event, row)" v-model="row.variableValue" active-value="1" inactive-value="0"></el-switch>
                    <span v-if="row.showDataValue == 2">
                      {{ row.variableValue }}
                        <span v-if="row.readWriteWayValue === '0'" >
                          <el-button
                              size="mini"
                              type="text"
                              icon="el-icon-edit"
                              @click="handleUpdateValue(row)">修改</el-button>
                        </span>
                    </span>                
                    <span v-if="row.showDataValue == 0">{{ row.variableValue }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="单位" prop="variableUnit" align="center" />

                  <!-- <el-table-column label="操作" align="center" /> -->
                </el-table>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </el-dialog>

  <!-- 添加或修改用户配置对话框 -->
  <el-dialog :title="titleOne" :visible.sync="openValue"   width="600px" append-to-body>

      <el-form ref="formOne" :model="formOne" :rules="rulesOne" label-width="100px">
        <el-form-item label="值" prop="variableValue">
          <el-input v-model="formOne.variableValue" placeholder="请输入值" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitValueForm">确 定</el-button>
        <el-button @click="closeOne">取 消</el-button>
      </div>


    </el-dialog>
  </div>
</template>

<script>
import { listDeviceVariable, updateDeviceVariableValue,editValve } from "@/api/iot/device";

export default {
  dicts: ["variable_type"],
  data() {
    return {
      // 弹出层标题
      title: "",
      titleOne: "修改值",
      // 是否显示弹出层
      open: false,
      openValue: false,
      tabActiveName: "detail",
      deviceId: null,
      variableValue: "",
      variableId: null,
      // 表单参数
      form: {},
      formOne: {},
       // 表单校验
       rulesOne: {
        variableValue: [
            { required: true, message: "值不能为空", trigger: "blur" },
          ],
        },
      varListQueryParams: {
        variableName: '',
        variableTypeId: ''
      },
      valList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
    };
  },
  computed: {
    location() {
      const point = new BMap.Point(this.form.lng, this.form.lat);
      return point;
    }
    
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        id: null,
        deviceName: null,
        deptId: null,
        slaveAddress: null,
        deviceNum: null,
        deviceStatus: null,
        deviceDesc: null,
        locationType: null,
        lng: null,
        lat: null,
        templatesId: null,
        gatewayId: null,
        deptName: null,
        gatewayName: null,
        templatesName: null,
        sn: null
      };
    },
    varListQueryHandle() {
      listDeviceVariable({
        deviceTemplateId: this.form.templatesId,
        deviceId: this.form.id,
        variableName: this.varListQueryParams.variableName,
        variableType: this.varListQueryParams.variableTypeId
      }).then((response) => {
        this.valList = response.rows
      });
    },
    variableValueChangeHandle(e, row) {
      console.log(row)

      // 设备id
      console.log(this.form.id)
      // 变量id
      console.log(row.id)
      // value
      console.log(e)
      const params =  {
        deviceId:this.form.id,
        variableValue:row.variableValue,
        variableId:row.id
      }
      updateDeviceVariableValue(params).then(res => {
        this.$modal.msgSuccess("已发送指令");
      }).catch(err => {
        this.$modal.msgError("操作失败");
      })
    },
    close() {
      this.valList = []
      this.varListQueryParams.variableName = ''
      this.varListQueryParams.variableTypeId = ''
    },

    closeOne() {
      this.openValue = false;
    },

    /** 修改按钮操作 */
    handleUpdateValue(row) {
      this.openValue = true;
      this.title = "修改值";
      this.deviceId = this.deviceId
      this.variableId = row.id

    },

    submitValueForm() {
      this.formOne.deviceId = this.form.id
      this.formOne.variableId = this.variableId
      this.$refs["formOne"].validate((valid) => {
        if (valid) {
          editValve(this.formOne).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.openValue = false;
            this.varListQueryHandle();
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.newdevInfoBoxLeftPic {
  width: 100px;
  height: 100px;
  .deviceImg {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 100px;
    margin: auto;
  }
  .text {
    color: #fff;
    letter-spacing: 0;
    font-weight: 400;
    line-height: 26px;
    top: -2px;
  }
}
.catalog-list {
  width: 300px;
  display: inline-table;
  ::v-deep .el-tabs__nav-wrap::after,
  ::v-deep .el-tabs__active-bar.is-left {
    left: 0;
    right: auto;
  }
  ::v-deep .el-tabs__item {
    text-align: left;
  }
}
.parameter-content {
  padding: 20px 0 20px 200px;
  label {
    height: auto;
    width: 190px;
  }
  p {
    width: auto;
    max-width: 300px;
    display: block;
    word-break: break-all;
  }
}
.map-container {
  width: 500px;
  height: 300px;
}
</style>
